<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>首页</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" type="text/css" href="../bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
  <style type="text/css">
    html,body{
        height: 100%;
        background-color: #ccc;
    }
    .container{
        border: 0px solid #0f0;
        height: 100%;
        padding: 0px; 
        width: 571px;
        display: flex;
        flex-direction: column;
    }
    .header{
            border: 0px solid #f00;
            height: 113px;
            width: 100%;
            background: #EAECEB;
    }
    .header-title{
        height: 41%;
        background: #DEE1E6;
    }
    .header-search{
        height: 59%;
        border: 1px solid #d00;
    }
    .footer{
        background: #656565;
        height: 64px;
        flex: 0 0 auto;
    }
    article{
        height: 100%;
        background-color: #fff;
    }
    a:link{
        text-decoration: none;
    }
    .bar,.content{
        width: 571px;
        margin: auto;
    }
  </style>
</head>
<body>
    <div class="container">
    <div class="page page-current" id="home">
          <header class="bar bar-nav">
            <div class="buttons-row">
                <a href="#searchLose" class="tab-link button active">寻找失物</a>
                <a href="#searchLoser" class="tab-link button">寻找失主</a>
              </div>
          </header>
          <!-- 搜索栏 -->
            <div class="bar bar-header-secondary">
              <div class="searchbar">
                <a class="searchbar-cancel">取消</a>
                <div class="search-input">
                  <label class="icon icon-search" for="search"></label>
                  <input type="search" id='search' placeholder='输入关键字...'/>
                </div>
              </div>
            </div>
          <nav class="bar bar-tab">
            <a class="tab-item active" href="#">
              <span class="icon icon-home"></span>
              <span class="tab-label">首页</span>
            </a>
            <a class="tab-item" href="#issue">
              <span class="icon icon-edit"></span>
              <span class="tab-label">发布</span>
            </a>
            <a class="tab-item" href="#message">
              <span class="icon icon-message"></span>
              <span class="tab-label">信息</span>
            </a>
            <a class="tab-item" href="#me">
              <span class="icon icon-me"></span>
              <span class="tab-label">我</span>
            </a>
          </nav>
            <!-- 这里是页面内容区 -->
            <div class="content">
                <div class="content-block">
                <div class="tabs">
                  <div id="searchLose" class="tab active">
                    <div class="content-block">
                      <p>This is tab 1 content</p>
                        <p>This is home page.--寻找失物</p>
                    </div>
                  </div>
                  <div id="searchLoser" class="tab">
                    <div class="content-block">
                      <p>This is tab 2 content</p>
                        <p>This is home page.--寻找失主</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
    </div><!-- end of .page .page-current -->
        <!-- 底部，导航栏 -->
<!--         <footer class="footer">
          <nav class="bar bar-tab">
            <a class="tab-item active" href="#">
              <span class="icon icon-home"></span>
              <span class="tab-label">首页</span>
            </a>
            <a class="tab-item" href="#">
              <span class="icon icon-edit"></span>
              <span class="tab-label">发贴</span>
            </a>
            <a class="tab-item" href="#">
              <span class="icon icon-message"></span>
              <span class="tab-label">信息</span>
            </a>
            <a class="tab-item" href="#">
              <span class="icon icon-me"></span>
              <span class="tab-label">我</span>
            </a>
          </nav>
        </footer> -->
    </div> <!-- end of container -->

  <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="../bootstrap-4.2.1/js/bootstrap.min.js" charset="utf-8"></script>
</body>
</html>